import { useState,useEffect } from "react"
import { Button } from "antd"

import { SunOutlined, MoonOutlined } from "@ant-design/icons"

const ThemeSwitcher = ()=>{
    const [theme,setTheme] = useState(()=>{
        // return localStorage.getItem('theme') || 'light'
        let savedTheme = localStorage.getItem('theme');
        if(savedTheme){
            return savedTheme
        }else{
            return 'light'
        }
    })
    useEffect(()=>{
        document.documentElement.setAttribute('data-theme',theme);
         localStorage.setItem('theme',theme);
    },[theme])
    const toggleTheme = ()=>{
        setTheme(theme === 'light' ? 'dark' : 'light')
        console.log(theme)
       
    }
    return (
        <Button
        type="text"
        icon={theme === 'light' ? <SunOutlined /> : <MoonOutlined />}
        size="large"
        onClick={toggleTheme}
        >
          {/* {theme === 'light' ? '切换到深色主题' : '切换到浅色主题'} */}
        </Button>
    )
}


export default ThemeSwitcher
